HTML Color
HTML Colors are used to set text color, background color and border color of elements. Colors can be defined using color names, HEX codes, RGB, RGBA, or HSL values.
What is HTML Color?
- Colors make webpages visually appealing and brand-consistent.
- HTML supports 140+ named colors like
red,blueandtomato. - HEX codes (e.g.
#FF0000) represent colors as hexadecimal numbers. - RGB / RGBA / HSL formats allow more flexibility including transparency.
Why Use Colors in HTML?
Visual Appeal
Colors enhance the look and feel of a webpage, making it inviting and modern.
Branding
Brand colors create instant recognition and emotional connection.
Readability
Contrast between text and background colors improves readability.
Highlights
Use bold colors to highlight buttons, alerts and call-to-actions.
Accessibility
Proper color contrast ensures content is accessible for everyone.
User Experience
Colors guide users through a site and improve usability.
HTML Color Syntax
- Color Name:
color: red; - HEX:
color: #ff5733; - RGB:
color: rgb(255, 87, 51); - RGBA:
color: rgba(255, 87, 51, 0.5); - HSL:
color: hsl(11, 100%, 60%);
HTML Color Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color: tomato;">Heading in Tomato</h1>
<p style="color: #2563eb;">Paragraph in HEX blue</p>
<p style="color: rgb(34,197,94);">Paragraph in RGB green</p>
<div style="background-color: #fef3c7; padding: 10px;">
Box with yellow background
</div>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| color: tomato; | Sets text color using a named color. |
| color: #2563eb; | Sets text color using a HEX code. |
| rgb(34,197,94); | Sets color using RGB format (Red, Green, Blue). |
| rgba(...); | Same as RGB plus an alpha value for transparency. |
| background-color: | Sets the background color of an element. |
Color Format Types
Use Cases
- Buttons: Use bold colors to attract attention.
- Backgrounds: Soft colors improve readability.
- Themes: Brand colors maintain visual consistency.
- Alerts: Red for errors, green for success, yellow for warnings.
Practice Questions
- Set the text color of a heading to
#e11d48using inline CSS. - Create a div with background color
rgba(0,0,0,0.4). - Use an HSL color value to color a paragraph.
- Build a color palette using 5 different color formats.
Frequently Asked Questions
What are the main color formats in HTML?
Named colors, HEX codes, RGB, RGBA, HSL and HSLA.
What does the 'A' in RGBA mean?
Alpha — it represents transparency from 0 (fully transparent) to 1 (fully opaque).
How many named colors does HTML support?
HTML supports 140+ standardized named colors.
Which color format is best?
HEX and RGB are most common. Use RGBA when you need transparency.
Conclusion
HTML colors transform plain pages into beautiful, brand-aware experiences. Use HEX, RGB, and RGBA wisely to create accessible and visually consistent websites.
Additional Tips
- Use a palette: Stick to 3-5 colors per design.
- Check contrast: Ensure WCAG compliance for accessibility.
- Prefer CSS variables: Define colors once and reuse globally.
- Avoid pure black: Use dark gray (#222) for softer text.